
<template>
  <div class="success">
    <div class="content-prompt">
      <img src="../../../static/img/1)[5WV~J0G$}GD]15INC720.png">
      <span>预定成功</span>
    </div>
    <div class="remind">
      <span>
        稍后我们将来电确认您的订单，请于您约定的用餐时间到餐厅用餐
      </span>
    </div>
    <div class="btn-wrapper">
      <div class="back-btn" @click="goarctive()">返回查看订单</div>
      <div class="exit-btn" @click="golist()">返回订单列表</div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      receiptid: ''
    }
  },
  created () {
    this.receiptid = this.$route.query.receiptid
  },
  methods: {
    goarctive () {
      this.$router.push({
        path: '/arctive',
        query: {
          receiptid: this.receiptid
        }
      })
    },
    golist () {
      this.$router.push({
        path: '/list'
      })
    }
  }
}
</script>

<style scoped>
.success{
  position:fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  left: 0;
}
.content-prompt {
  display: flex;
  justify-content: center;
  margin-top: 98px;
  margin-bottom: 50px;
}
.content-prompt img {
  height: 55px;
  width: 55px;
}
.content-prompt span {
  line-height: 55px;
  margin-left: 16px;
  font-size: 24px;
  color: #333333;
}
.remind {
  box-sizing: border-box;
  margin: 30px 41px 100px;
  text-align: center;
  font-size: 14px;
  color: #999999;
}
.remind span{
  line-height: 20px;
}
.btn-wrapper{
  margin: 34px auto;
  padding: 0 15px;
  width: 90%;
}
.btn-wrapper div {
  line-height: 44px;
  border: 1px solid #92D4EF;
  border-radius:5px;
}
.back-btn {
  text-align: center;
  color: #FFFFFF;
  background-color: #92D4EF;
  font-size: 14px;
}
.exit-btn {
  margin-top: 15px;
  color: #92D4EF;
  text-align: center;
  font-size: 14px;
}
</style>
